<template>
  <div>
    <div class="edit">
      <div class="edit-row">
        <div class="edit-name">名称:</div>
        <el-input v-model="currentChecker.name" placeholder="请输入内容"></el-input>
      </div>
      <div class="edit-row">
        <div class="edit-name">描述:</div>
        <el-input
          v-model="currentChecker.describe"
          type="textarea"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <div class="edit-transfer-row">
        <el-transfer
          v-model="currentChecker.validateIdList"
          :data="allValidate"
          :titles="['All Validate', ' owned Validate']"
          :render-content="renderFunc"
        ></el-transfer>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogCancel()">取 消</el-button>
          <el-button type="primary" @click="dialogConfirm()">确 定</el-button>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
module.exports = {
  data: function () {
    return {
      currentChecker: {
        name: "",
        describe: "",
        validateIdList: [],
      },
      allValidate: [],
      renderFunc(h, option) {
        return h(
          "el-tooltip",
          {
            props: {
              effect: "dark",
              placement: "top-start",
              content: option.describe,
              openDelay: 500,
            },
          },
          [h("span", { props: { size: "mini" } }, option.label)]
        );
      },
    };
  },
  methods: {
    getCheckerById: async function () {
      if (!!this.$route.query.checkerId) {
        const { data } = await axios.get(
          `checker/get-checker?id=${this.$route.query.checkerId}`
        );
        this.currentChecker = data.info;
      } else {
        this.currentChecker = {};
      }
    },

    getAllValidate: async function () {
      const { data } = await axios.get("/validate/get-all-validate");
      const validates = data.info;
      this.allValidate = validates.map((item) => {
        return {
          label: item.name,
          key: item.id,
          describe: item.describe,
        };
      });
    },

    dialogConfirm: async function () {
      const { data } = await axios.post(`/checker/update-checker`, this.currentChecker);
      if (data.success) {
        this.$message({ message: data.message, type: "success" });
      } else {
        this.$message.error(data.message);
      }
      this.$router.push({ path: "/checker" });
    },

    dialogCancel: function () {
      this.$router.push({ path: "/checker" });
    },
  },

  created: function () {
    this.getCheckerById();
    this.getAllValidate();
  },
};
</script>

<style scope>
.edit {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.inputs {
  display: flex;
}
.edit-row {
  display: flex;
  margin-top: 20px;
  width: 50%;
}
.edit-name {
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.edit-transfer-row {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dialog-footer {
  margin-top: 50px;
}
</style>
